<template>
  <v-app>
    <v-main>
      <v-card
        class="mx-auto"
        max-width="80%"
      >
        <v-img class="white--text align-end"
               height="300px"
               src="https://cdn.vuetifyjs.com/images/cards/docks.jpg">

        </v-img>

        <v-card-subtitle class="pb-0">
          <v-form>
            <v-container>
              <v-row>
                <v-col cols="12"
                       md="6">
                  <v-text-field
                    v-model="loginModel.username"
                    label="name"
                    required
                  ></v-text-field>
                </v-col>

                <v-col
                  cols="12"
                  md="6"
                >
                  <v-text-field
                    label="password"
                    v-model="loginModel.password"
                    required
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </v-card-subtitle>

        <v-card-text class="text--primary">

        </v-card-text>

        <v-card-actions>
          <v-btn depressed color="primary" @click="login">
            Login
          </v-btn>


        </v-card-actions>
      </v-card>

    </v-main>
  </v-app>
</template>
<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import {loginRequest} from '@/pagetypes';
  import store from "@/store";

  @Component({
    components: {}
  })
  export default class APP extends Vue {
    loginModel: loginRequest = {username: '', password: ''}

   async login() {
      await store.dispatch('login/login', this.loginModel).then((res:any)=>{
        console.log(res)
      })
    }
  }
</script>
<style>
  .mx-auto {
    margin-top: 100px;
  }
</style>
